<template>
  <div v-for="item of detail" :key="item._id">
      <img :src="item.pic" alt="">
      <p>{{item.title}}</p>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import { onMounted } from '@vue/runtime-core'
import axios from 'axios'
export default {
  setup(){
    const state = reactive({
      detail:{}
    })
    const router = useRouter();
    onMounted(()=>{
      console.log(router.currentRoute.value.query)
      var {id} = router.currentRoute.value.query
      axios.get(`http://122.112.161.135:4000/api/movieDetail?id=${id}`).then(res=>{
        console.log(res.data.res);
        state.detail = res.data.res
      })
    })
    const refState = toRefs(state);
    return{
      ...refState
    }
  }
}
</script>

<style>

</style>